<template>
  <x-drawer :visible.sync="props.visible" @cancel="close" direction="ltr">
    <view class="p-drawer">
      <view class="_header">
        <view class="icon" @click="close">
          <x-icon name="icon-025" size="50" color="#C8C9CC" />
        </view>
      </view>
      <view class="_input">
        <input password focus type="text" placeholder="请输入登陆密码" v-model="password" />
      </view>
      <view class="_bottom">
        <x-button size="large" :round="true" @click="buy">确认</x-button>
      </view>
    </view>
  </x-drawer>
</template>

<script setup>
import {ref} from "vue";
import XDrawer from '@/components/x-drawer.vue'
import XButton from '@/components/x-button.vue'
import XIcon from '@/components/x-icon.vue'
import {reqPayOrder} from "@/api";

const emits = defineEmits(['close', 'click'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  orderId: {
    type: Number,
    required: true
  }
})
const password = ref("")

function close() {
  password.value = ""
  emits("close")
}
async function buy() {
  await reqPayOrder({orderId: props.orderId, password: password.value})
  password.value = ""
}
</script>

<style lang="scss" scoped>
.p-drawer {
  position: relative;
  background: #FFFFFF;

  ._header {
    display: flex;
    padding: 50rpx;
    .icon{
      position: absolute;
      top: 24rpx;
      right: 24rpx;
    }
  }
  ._input{
    margin-top: 30rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    input{
      height: 50rpx;
      padding: 20rpx 40rpx;
      font-size: 80rpx;
      flex: 1;
    }
  }

  ._bottom{
    margin-top: 30rpx;
  }
}
</style>


